<template>
  <div class="student-info-card">
    <el-card>
      <div class="info-row"><span class="label">学号：</span>{{ studentId }}</div>
      <div class="info-row"><span class="label">姓名：</span>{{ name }}</div>
      <div class="info-row"><span class="label">身份：</span>{{ role === 'student' ? '学生' : role }}</div>
    </el-card>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useUserStore } from '../store/user'
const userStore = useUserStore()
const studentId = computed(() => userStore.studentId || localStorage.getItem('studentId') || '')
const name = computed(() => userStore.name || localStorage.getItem('name') || '')
const role = computed(() => userStore.role || localStorage.getItem('role') || '')
</script>

<style scoped>
.student-info-card {
  margin-bottom: 16px;
  max-width: 400px;
}
.info-row {
  margin-bottom: 8px;
  font-size: 15px;
}
.label {
  color: #888;
  margin-right: 8px;
}
</style> 